<template>
  <div class="map-detail">
    <div class="map-select">
      <div class="unit-show">
        <el-radio-group v-model="radio" @change="handleUnitChange">
          <el-radio v-model="radio" :label="'0009'">维保单位</el-radio>
          <el-radio v-model="radio" :label="'0006'">施工单位</el-radio>
          <el-radio v-model="radio" :label="'0005'">制造单位</el-radio>
          <el-radio v-model="radio" :label="'0004'">设计单位</el-radio>
          <el-radio v-model="radio" :label="'0003'">使用单位</el-radio>
          <el-radio v-model="radio" :label="'0002'">检验单位</el-radio>
        </el-radio-group>
      </div>
      <div class="device-show">
        <!-- <el-radio-group
          v-model="radio"
          @change="handleChange"
          text-color="red"
        >
          <el-radio v-model="radio" :label="{code:'1000',flag:2}">锅炉</el-radio>
          <el-radio v-model="radio" :label="{code:'2000',flag:2}">压力容器</el-radio>
          <el-radio v-model="radio" :label="{code:'4000',flag:2}">起重机械</el-radio>
          <el-radio v-model="radio" :label="{code:'3000',flag:2}">电梯</el-radio>
          <el-radio v-model="radio" :label="{code:'5000',flag:2}">场内车</el-radio>
          <el-radio v-model="radio" :label="{code:'9000',flag:2}">客运索道</el-radio>
          <el-radio v-model="radio" :label="{code:'6000',flag:2}">游乐设施</el-radio>
        </el-radio-group> -->
        <el-radio-group
          v-model="radio"
          @change="handleDevChange"
          text-color="red"
        >
          <el-radio v-model="radio" :label="'1000'">锅炉</el-radio>
          <el-radio v-model="radio" :label="'2000'">压力容器</el-radio>
          <el-radio v-model="radio" :label="'4000'">起重机械</el-radio>
          <el-radio v-model="radio" :label="'3000'">电梯</el-radio>
          <el-radio v-model="radio" :label="'5000'">场内车</el-radio>
          <el-radio v-model="radio" :label="'9000'">客运索道</el-radio>
          <el-radio v-model="radio" :label="'6000'">游乐设施</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="map-box">
      <!-- <Map :pointArr="pointList"></Map> -->
      <BdMap
        :revCenter="bdCenter"
        :revPoints="revDefaultPoints"
        :revZoom="11"
        :isIcon="false"
        :revPointMethod="revPointMethod"
        :lotPoint="lotPoint"
      ></BdMap>
    </div>
    <div class="goindex">
      <GoIndex :isblue="true"></GoIndex>
    </div>
    <!-- 弹出 单位  -->
    <el-dialog
    v-if="dialogUnit"
      title="详情"
      width="60%"
      :visible.sync="dialogUnit"
      :fullscreen="false"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <!--  -->
      <MapUnitDetail :postId="postId"></MapUnitDetail>
    </el-dialog>
    <!-- 弹出 设备  -->
    <el-dialog
    v-if="dialogDev"
      title="详情"
      width="60%"
      :visible.sync="dialogDev"
      :fullscreen="false"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <!--  -->
      <MapDeviceListDetail :postId="postId"></MapDeviceListDetail>
    </el-dialog>
  </div>
</template>

<script>
import BdMap from "../components/map/BdMap";
import MapDeviceListDetail from "../components/detail/MapDeviceListDetail";
import MapUnitDetail from "../components/detail/MapUnitDetail";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { BdMap, MapDeviceListDetail, MapUnitDetail },
  props: {},
  data() {
    //这里存放数据
    return {
      checkList: [],
      pointList: [],
      bdCenter: {
        lng: 119.223449,
        lat: 34.623639,
      },
      radio: {code:'1000',flag:2},
      dialogUnit: false,
      dialogDev: false,
      revDefaultPoints: [
        // 119.324059,34.543753
        // { lng: 119.324059, lat: 34.543753, id: "123", type: 2 },
        // { lng: 119.384059, lat: 34.543753, id: "321", type: 1 },
      ],
      postId: null,
      lotPoint: []
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    // 单位选中
    handleUnitChange(item) {
      console.log('unit');
      this.flag = 1
      console.log('flag:' + this.flag + ', radio: ' + this.radio);
      this.getMapPoints()
    },
    // 设备选中
    handleDevChange(item) {
      console.log('dev');
      this.flag = 2
      console.log('flag:' + this.flag + ', radio: ' + this.radio);
      this.getMapPoints()
    },
    // 点击大头针
    revPointMethod(item) {
      // return console.log(item.point);
      item = item.point
      if (!item.id) {
        return alert('大头针数据有误')
      }
      this.postId = item.id;
      item.flag == 1 ? (this.dialogUnit = true) : (this.dialogDev = true);
    },
    // 获取大头针信息
    async getMapPoints() {
      this.revDefaultPoints = []
      let params
      let area_code = this.$store.getters.getAreaList[this.$store.getters.getListAreaIndex].area_code
      let paramcode = this.radio
      params = {
        flag: this.flag,
        area_code,
        paramcode
      }
      console.log('请求参数：');
      console.log(params);
      // return
      let ret = await this.$http.postGetDetailMapInfo(params);
      if (ret.data.errorCode != 0) {
        console.log("服务器出错");
        console.log(ret);
        return;
      }
      // return console.log(ret.data.data.dataList);
      let arr = ret.data.data.dataList
      arr.forEach(ele => {
        ele.type = 4,
        ele.flag = ret.data.data.flag
      });
      // this.revDefaultPoints = arr
      this.lotPoint = arr
      // console.log(ret.data.data);
      // console.log(this.revDefaultPoints);
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang='less' scoped>
.map-detail {
  width: 100%;
  height: 100%;
  position: relative;
  .map-select {
    // width: 5rem;
    // height: 0.6rem;
    // padding: 0.1rem 0.1rem;
    border-radius: 0.06rem;
    // background-color: rgba(77, 144, 254, 0.5);
    // background-color: rgba(250, 249, 249, 0.6);
    // border: 1px solid #000;
    position: absolute;
    left: 2%;
    bottom: 2%;
    z-index: 99999;
    .unit-show {
      // width: 10%;
      padding: 0.1rem;
      text-align: left;
      background-color: rgba(0, 127, 206, 0.6);
      // border: 1px solid #000;
    }
    .device-show {
      padding: 0.1rem;
      background-color: rgba(141, 211, 95, 0.6);
      // border: 1px solid #000;
    }
  }
  .map-box {
    width: 100%;
    height: 100%;
  }
}
</style>